<template>
	<div class="login-wrap">
		<div class="login-cont center-50">
			<h4>系统登录</h4>
			<el-form
				:model="ruleForm"
				:rules="rules"
				ref="formName"
				status-icon
				class="demo-ruleForm"
			>
				<el-form-item prop="account">
					<el-input
						prefix-icon="el-icon-user-solid"
						type="text"
						v-model="ruleForm.account"
						placeholder="请输入账号"
					></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input
						prefix-icon="el-icon-lock"
						show-password
						type="password"
						v-model="ruleForm.password"
						placeholder="请输入密码"
						@keyup.native.enter="handleLogin"
					></el-input>
				</el-form-item>
				<el-button type="primary" @click="handleLogin">登录</el-button
				>
			</el-form>
		</div>
	</div>
</template>

<script>
	import { checkAccount, checkPassword } from "@/utils/valid";
import { mapActions } from 'vuex';
	
	export default {
		data() {
			return {
				ruleForm: {
					account: "",
					password: "",
				},
				rules: {
					account: { validator: checkAccount, trigger: "blur" },
					password: { validator: checkPassword, trigger: "blur" },
				},
			};
		},
		methods:{
			...mapActions('user',['$_UserLogin']),
			// 跳转到首页
    handleLogin() {
      this.$refs.formName.validate(async(valid) => {
        // valid: false --> 表单验证未通过
        // valid: true --> 表达验证通过
        if (valid) {
			await this.$_UserLogin(this.ruleForm)
			this.$router.push('/home')
        }

        
      })
    },
		}
	};
</script>

<style lang="scss" scoped>
	.login-wrap {
		height: 100%;
		background: url("@/assets/imgs/login-bg2.jpg") no-repeat center/cover;
		.login-cont {
			text-align: center;
			h4 {
				color: #fff;
				margin-bottom: 22px;
				font-size: 20px;
			}
			.el-input {
				width: 300px;
			}
			.el-button {
				width: 100%;
			}
		}
	}
</style>
